<template>
  <div class="_wz_cent_main _wz_yunZhengBooking">
    <Card :bordered="true" style="margin:0 0 10px;">
      <p slot="title">搜索</p>
      <Form :model="formDataSearch" label-position="right" :label-width="100" inline @keydown.native.enter.prevent="">
        <FormItem label="运输企业">
          <i-select v-model="formDataSearch.comId" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="预约日期">
          <DatePicker type="date" placeholder="请选择预约日期" split-panels v-model="formDataSearch.appointmentStartDate" clearable @on-change="formDataSearch.appointmentStartDate=$event"></DatePicker>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true">
      <p slot="title">
        列表
        <span style="color: #ed4014;margin: 0 0 0 10px;font-weight: 600;font-size: 12px;">线上运政预约业务请咨询当地主管部门，以主管部门通知为准。</span>
      </p>
      <p slot="extra">
        <Button type="primary" @click="addTableData">添加</Button>
      </p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>

    <Drawer :title="formTitle" v-model="formOperation" width="720" :draggable="true" :mask-closable="false" :styles="formOperationStyles">
      <yunZhengBookingAdd  v-if="formOperation" :selectData="selectData" @closeFun="closeFun"></yunZhengBookingAdd>
    </Drawer>
    <Spin size="large" fix v-if="spinShow"></Spin>



  </div>
</template>
<script>
import wzTbale from "../../components/table/table";
import yunZhengBookingAdd from "./yunZhengBookingAdd";
export default {
  components: {
    wzTbale,//列表
    yunZhengBookingAdd,
  },
  data() {
    return {
      subDeptList:[],
      selectData:{},
      spinShow: false,//本页加载
      formDataSearch: {},//搜索表单数据
      formData: {},//新增修改表单数据
      formOperation: false,//表单左侧移出
      formOperationStyles: {//表单左侧移出css
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      tableData: {
        url: this.apiUrl.appointmentComAppointPageList,//请求地址
        method: 'post',//请求方式
        where: {},//搜索条件
        height: 'auto',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表格表头数据
          {type: 'index', width: 80, align: 'center', title: '序号'},
          {title: '预约状态', minWidth: 140,
            render: (h, params) => {
            //状态（0：已预约，1：已受理，2：已过期 3：关闭预约）
              if (params.row.appointmentState == 0) {
                return h('Tag', {props: {type: 'dot',color: 'primary'}}, '已预约')
              } else if (params.row.appointmentState == 1){
                return h('Tag', {props: {type: 'dot',color: 'success'}}, '已受理')
              } else if (params.row.appointmentState == 2){
                return h('Tag', {props: {type: 'dot',color: 'error'}}, '已过期')
              } else{
                return h('Tag', {props: {type: 'dot',color: 'default'}}, '关闭预约')
              }

            }
          },
          {title: '运输企业', minWidth: 260, key: 'comName'},
          {title: '联系人', minWidth: 100, key: 'contacts'},
          {title: '联系电话', minWidth: 120, key: 'contactsPhone'},
          {title: '办理业务', minWidth: 180, key: 'appointmentTypeValue'},
          {title: '所属区域', minWidth: 140, key: 'orgName'},
          {title: '办理窗口', minWidth: 120,
            render: (h, params) => {
              return h('span', params.row.appointmentWindow +' 窗口办理');
            }
          },
          {title: '预约日期', minWidth: 100, key: 'appointmentStartDate'},
          {title: '预约时间', minWidth: 200,
            render: (h, params) => {
              return h('span', params.row.appointmentStartTime +' - '+ params.row.appointmentEndTime);
            }
          },
        ],
        format: {//返回数据格式
          list: ['data'],//数据list
          count: [ 'count'],//数据总量
        },
      },
      formTitle: "",//表单名称
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态
  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;

    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList,{}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })

  },
  methods: {//执行的方法
    addTableData() {//table添加
      let that = this;
      that.selectData = {};
      that.formTitle = "添加";
      that.formOperation = true;
    },
    searchSubmit() {//搜索
      var that = this;
      /*
      * 1.如果没有选择 清除搜索字段
      * 2.如果有选择 没有信用码 制空
      * */

      if(!!that.formDataSearch.id){//有选择
        var starEnd = that.public.extractName(that.subDeptList, [that.formDataSearch.id], {
          uniqueValue: 'id',
          nameList: ['uniformSocialCreditCode'],
        })
        if(!!starEnd.uniformSocialCreditCode.join(",")){
          that.formDataSearch.uniformSocialCreditCode = starEnd.uniformSocialCreditCode.join(",");
        }else{
          that.formDataSearch.uniformSocialCreditCode = '';
        }
      }else{
        delete that.formDataSearch.uniformSocialCreditCode;
      }
      this.tableData.where = JSON.parse(JSON.stringify(this.formDataSearch));
      this.$refs.wzTbale.tableLoadData(true);
    },
    //添加修改触发后关闭刷新
    closeFun(data) {
      let that = this;
      if (data) {//添加修改 刷新表单
        that.$refs.wzTbale.tableLoadData();
      }
      that.formOperation = false;
    },
  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_yunZhengBooking {
  display: flex;
  flex-direction: column;
}
</style>
